<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>他人用户中心_frm</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style>
.my-header {
    background: url('../image/user_center_bg.png') no-repeat;
    background-size: cover;
    min-height: 220px;
    position: relative;
}
.aui-content {
	margin-bottom: 5px;
}
.my-info {
    position: relative;
    padding: 20px 0;
    width: 100%;
    bottom: 0;
    text-align: center;
    vertical-align: center;
}
.my-info img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.my-info p.nickname {
    margin-top: 5px;
    color: #ffffff;
    font-size: 18px;
}
.my-menu {
    position: absolute;
    width: 100%;
    height: 45px;
    line-height: 14px;
    left: 0;
    bottom: 0;
    text-align: center;
    background: #ffffff;
    filter:Alpha(opacity=50);
    background:rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important;
    color: #ffffff;
    font-size: 12px;
    padding-top: 10px;
}
.my-menu .aui-col-xs-4 {
    border-right: 1px solid #9bd6d5;
}
.my-menu .aui-col-xs-4:last-child {
    border-right: none;
}

.last-login-time{
	font-size: 12px;
	margin-bottom: 5px;
}
button, .aui-btn {
	padding: 3px 12px;
	font-size: 12px;
	border-radius: 4px;
}
.blog-information{
	padding: 8px 0;
	height: 32px;
	font-size: 16px;
	line-height: 16px;
	color: #8f8f94;
}
.blog-information .aui-col-xs-6 {
    border-right: 1px solid #8f8f94;
}
.blog-information .aui-col-xs-6:last-child {
    border-right: none;
}
.objectreply{
	margin: 3px 0 0 0;
	font-size: 14px;
	color: #333333;
	background-color: #eeeeee;
	padding: 8px 5px;
}
.aui-user-view-cell:first-child:after {
	border-top: 0px solid #c8c7cc;
}
</style>
<body>
    <div class="aui-content my-header" id="my-header">
        <div class="my-info">
            <img src="../image/widget_dface.png" id="portrait">
            <p class="nickname" id="name">匿名</p>
        </div>
        <div class="my-menu">
            <div class="aui-col-xs-4" id="score">积分<br />0</div>
            <div class="aui-col-xs-4" id="followers">关注<br />0</div>
            <div class="aui-col-xs-4" id="fans">粉丝<br />0</div>
        </div>
    </div>
    <p class="last-login-time aui-text-center">上次登录：<font id="latestonline">无</font></p>
    <div class="aui-content aui-content-padded aui-text-center">
    	<a class="aui-btn aui-btn-primary"><span class="aui-iconfont aui-icon-message"></span>　私信　</a>　
    	<a class="aui-btn aui-btn-primary" id="relation"><span class="aui-iconfont aui-icon-add"></span>　关注　</a>
    </div>
	
	<div class="aui-content blog-information aui-bg-default">
	  <div class="aui-col-xs-6 aui-text-center">博客</div>
	  <div class="aui-col-xs-6 aui-text-center">资料</div>
	</div>
    <div class="aui-content" id="content">
        <ul class="aui-user-view" id="list">
            <li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/995/1991026_50.jpg?t=1416931477000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">大菲</span>
                    <p>更新了动态：</p>
                    <h5 class='aui-text-default message'>你瞅啥？</h5>
	                <p><img src="http://static.oschina.net/uploads/space/2015/1102/205646_dSRo_2001277_thumb.jpg" /></p>
				    <a class="aui-pull-left">
				        <p><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
				    <a class="aui-pull-right">
				        <p class="aui-ellipsis-1"><font class="aui-iconfont aui-icon-comment"></font> 2</p>
				    </a>
                </div>
            </li>
            
            <li class="aui-user-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="http://static.oschina.net/uploads/user/995/1991026_50.jpg?t=1416931477000" width="48px" height="48px">
                <div class="aui-img-body">
                    <span class="aui-text-primary">大菲</span>
                    <p>回复了动态：</p>
                    <h5 class='aui-text-default message'>@金三胖 不抽烟可以 不喝酒不行啊！</h5>
	                <div class="objectreply">
	                    	从今天开始戒酒，求监督！如果你们再看见我喝一口的话................不用你们说！我！我自罚三杯！[再...
	                </div>
				    <a class="aui-pull-left">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-time"></font> 5分钟前　<font class="aui-iconfont aui-icon-mobile"></font> iPhone</p>
				    </a>
				    <a class="aui-pull-right">
				        <p class='aui-ellipsis-1'><font class="aui-iconfont aui-icon-comment"></font> 2</p>
				    </a>
                </div>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/OSChinaApi.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
	var page = 0, ajaxTag = 0;
	var uid = $api.getStorage('user_uid');
	var pageParam;
    apiready = function () {
    	pageParam = api.pageParam;
    	
		// 下拉刷新
		api.setRefreshHeaderInfo({
	        visible: true,
	        loadingImg: 'widget://image/ptr_pull.png',
	        bgColor: '#efeff4',
	        textColor: '#959595',
	        textDown: '下拉可刷新',
	        textUp: '松开立即刷新',
	        showTime: true
		}, function(ret, err){
			//$api.html($api.byId('list'), '');
		    page = 0;
			// Window或者Frame页面滑动到底部事件,可用于实现滚动到底部，加载更多功能
			api.addEventListener({
			    name:'scrolltobottom',
			    extra:{
			        threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
			    }
			},function(ret,err){
			    getUserInfo(page);
			});
		    //从服务器加载数据，完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
		    getUserInfo(page);
		});
		
		// 首次加载时设置下拉刷新组件为刷新中状态
		api.refreshHeaderLoading();
    }
    
	function getUserInfo( pageIndex ){
		if(ajaxTag){
			return false;
		}
		var listhtml = '';
	    var more = $api.byId("more");
	    if(more){
	        $api.text(more, '加载中...');
	    }
		var url = OpenAPI.user_information +'&uid='+uid+'&hisuid='+pageParam.hisuid+'&pageIndex='+pageIndex;
		log(url);
		
		ajaxTag = 1;
		api.ajax({
		    url: url,
		    method: 'get',
		    timeout: 30,
		    dataType: 'text',
		    returnAll:false,
		},function(ret,err){
			ajaxTag = 0;
		    if (ret) {
				var trans = api.require('trans');
				trans.parse({
				    data:ret
				},function(ret,err){
				    if(ret) {
				    	if(ret.oschina.user.name=='匿名'){
				    		return false;
				    	}
				    	// 第一页，设置用户基本信息
						if( pageIndex==0 ){
							$api.text($api.byId("name"), ret.oschina.user.name);
				    		if(typeof(ret.oschina.user.portrait) == 'string' && ret.oschina.user.portrait.length > 0){
				    			$api.attr($api.byId("portrait"), 'src', ret.oschina.user.portrait);
				    		}
				    		$api.html($api.byId("score"), '积分<br />'+ret.oschina.user.score);
							$api.html($api.byId("fans"), '粉丝<br />'+ret.oschina.user.fans);
							$api.html($api.byId("followers"), '关注<br />'+ret.oschina.user.followers);
							$api.text($api.byId("latestonline"), friendly_time(ret.oschina.user.latestonline) );

							// 好友关系
							switch( parseInt(ret.oschina.user.relation) )
							{
							case 1:		// 相互关注
							  $api.html($api.byId("relation"), '<span class="aui-iconfont aui-icon-move"></span>取消互粉');
							  break;
							case 2:		// 已关注（对方未关注我）
							  	$api.html($api.byId("relation"), '<span class="aui-iconfont aui-icon-move"></span>取消关注');
							  break;
							case 3:		// 未关注
							 	$api.html($api.byId("relation"), '<span class="aui-iconfont aui-icon-add"></span>　关注　');
							  break;
							}
							
							
						}
				    }else{
				        log(err.msg);
				    }
				});
		    }else {
		        log('错误码：'+err.code+'；错误信息：'+err.msg+'网络状态码：'+err.statusCode);
		    	showAjaxErrMsg(err.code);
		    }
		    
		    api.refreshHeaderLoadDone();
		});
		
		
	}
    
</script>
</html>